import BaseChart from '@/components/echarts/BaseChart';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { useCmpDataStore } from '@/stores/cmpDataStore';
import { fontSizeRem } from '@/utils/fontSizeRem';
import { type EChartsOption } from 'echarts';

const Turnover = () => {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo
  const compareData = useCmpDataStore(status => status.cmpData) as StoreInfo

  // 字体颜色
  const textColor = '#eee'
  const basicTurnover: number[] = []
  const compareTurnover: number[] = []

  basicData.monthlyData.forEach(month => {
    basicTurnover.push(Number((month.totalRevenue / 10000).toFixed(1)))
  });
  compareData.monthlyData.forEach(month => {
    compareTurnover.push(Number((month.totalRevenue / 10000).toFixed(1)))
  });
  const xAxisList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']


  const options: EChartsOption = {
    title: {
      text: '月度营业额趋势分析',
      left: 'center',
      textStyle: {
        color: "#fff",
        fontSize: fontSizeRem(16)
      }
    },
    legend: { // 图例组件
      right: '5%', // 图例组件离容器右侧的距离
      top: '12%', // 图例组件离容器上侧的距离
      itemWidth: 8, // 图例组件的宽度
      itemHeight: 8, // 图例组件的高度
      icon: 'stack', // 图例项的 icon
      textStyle: {
        color: textColor, // 文字颜色
        fontSize: fontSizeRem(14),
      }
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '4%',
      right: '6%',
      top: '25%',
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisList,
      axisLabel: {
        color: '#fff',
        fontSize: fontSizeRem(14),  // 缩小字号
        interval: 0,   // 显示所有标签
      },
      axisLine: {
        lineStyle: {
          color: textColor
        }
      },
      axisTick: {
        show: false  // y轴刻度线
      },
      splitLine: {
        show: false  // 网格
      },
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      max: 300,
      // splitNumber: 5,
      name: '营业额 (万元)',
      nameTextStyle: {
        color: textColor,
        fontSize: fontSizeRem(14),
      },
      axisLabel: {
        color: textColor,   // 坐标轴字体颜色
        fontSize: fontSizeRem(16),
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false    // y轴刻度线
      },
      splitLine: {
        show: true,    // 网格
        lineStyle: {
          color: '#CCCCCC',
          type: 'dashed'
        }
      }
    },

    series: [
      {
        name: '当前门店',
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        z: 1,
        itemStyle: {
          color: '#FF6B6B'
        },
        lineStyle: {
          color: '#FF6B6B'
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 万元';
          },
        },
        data: basicTurnover
      },
      {
        name: '对比门店',
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        z: 1,
        itemStyle: {
          color: '#48D1CC'
        },
        lineStyle: {
          color: '#48D1CC'
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 万元';
          },
        },
        data: compareTurnover
      }
    ]
  };




  return (
    <div style={{ width: "100%", height: '26vh' }}>
      <BaseChart option={options} />
    </div>
  );
};

export default Turnover;